<template>
    <el-container>
        <el-main height="">
            <el-card style="position: relative;">
                <el-row>
                    <el-col :span="24" style="margin-bottom: 15px;">
                        <el-button type="primary" size="default" @click="goHome">返回首页</el-button>
                    </el-col>

                    <el-col :span="8">
                        <img :src="BASE_URL+product.imageUrl" style="width: 100%;">
                    </el-col>
                    <el-col :span="16">
                        <div style="margin-left: 80px;">
                            <h1 style="font-size: 20px;">{{product.description}}</h1>
                            <h1 style="font-size: 20px;">价格：<span style="color: red;">{{product.price}}</span> 元</h1>
                            <h1 style="font-size: 20px;">库存：{{product.number}}</h1>
                            <h1 style="font-size: 20px;">
                                购买数量：
                                <el-input-number v-model="num" :min="1" :max="10" @change="handleChange" />
                            </h1>
                            <el-button type="primary"  size="default" @click="addCart(product.id)">加入购物车</el-button>
                        </div>
                    </el-col>
                </el-row>
            </el-card>
        </el-main>
    </el-container>

    <!-- 评价 -->
    <!-- 评价 -->
    <el-container>
        <el-main height="">
            <el-card>
                <div class="review-section">
                    <div class="review-title-container">
                        <h2 class="review-title">商品评价</h2>
                        <el-button
                                type="primary"
                                size="medium"
                                @click="showReviewDialog"
                                class="add-review-btn"
                        >
                            新增评论
                        </el-button>
                    </div>

                    <!-- 新增评论弹窗 -->
                    <el-dialog v-model="dialogVisible" title="新增评论" width="50%">
                        <el-form :model="reviewForm" label-width="80px">
                            <el-form-item label="评论内容">
                                <el-input
                                        v-model="reviewForm.content"
                                        type="textarea"
                                        :rows="4"
                                        placeholder="请输入您的评论"
                                ></el-input>
                            </el-form-item>
                        </el-form>
                        <template #footer>
                            <span class="dialog-footer">
                                <el-button @click="dialogVisible = false">取消</el-button>
                                <el-button type="primary" @click="submitReview">提交</el-button>
                            </span>
                        </template>
                    </el-dialog>

                    <div class="review-list">
                        <div
                                v-for="(review, index) in reviews"
                                :key="index"
                                class="review-item"
                        >
                            <div class="review-meta">
                                <span class="review-user">{{ review.username }}</span>
                                <span class="review-time">{{ review.createTime }}</span>
                            </div>
                            <div class="review-content">
                                <p>{{ review.content }}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </el-card>
        </el-main>
    </el-container>
</template>

<script setup>
import router from '@/router'
import { ElMessage} from 'element-plus'
import { ref, onMounted } from 'vue'
import axios from 'axios'
import qs from 'qs'

// 存放商品数据
const product = ref({})
// 定义购买数量
const num = ref(1)

// 定义获取单个商品
const getOneProduct = () => {
    product.value = JSON.parse(localStorage.getItem('product'))
    // console.log(product.value)
}
//定义加入购物车的单个商品
const cart = ref({

})
//添加购物车
const addCart = (item) => {    
    cart.value.userId = user.id
    cart.value.productsId = item
    cart.value.amount = num
    console.log(cart.value)
    let data = qs.stringify(cart.value)
    axios.post(BASE_URL+'/v1/cart/add',data).then(res=>{
        if (res.data.code === 2000) {
            ElMessage.success('添加成功');
        } else {
            ElMessage.error(res.data.msg);
        }
    })
}

// 返回首页
const goHome = () => {
    router.push('/indexs')
    localStorage.removeItem('product')
}

onMounted(() => {
    getOneProduct()
})


// 关于评论的js代码
const reviews = ref([
    {
        userId: '',
        Content: '',
        createTime: '',
    }
])
const user = getUser();

const dialogVisible = ref(false)
const reviewForm = ref({
    content: '',
    userId:user.id
})

// 显示评价对话框
const showReviewDialog = () => {
    dialogVisible.value = true
}


// 提交评论
const submitReview = () => {
    reviewForm.value.productsId = product.value.id
    console.log(reviewForm.value)
    let data =qs.stringify(reviewForm.value)
    axios.post(BASE_URL+'/v1/review/add',data).then(res=>{
        if(res.data.code == 2000){
            ElMessage.success('评论成功')
            dialogVisible.value = false
            reviewForm.value.content = ''
            logReview()
        }else{
            ElMessage.error(res.data.msg)
        }
    })
}


const logReview =()=>{
    const productsId = product.value.id
    // console.log(typeof productsId)
    axios.get(BASE_URL +'/v1/review/select/'+productsId).then((res)=>{
        if(res.data.code == 2000){
            reviews.value= res.data.data
        }else{
            ElMessage.error(res.data.msg);
        }
    })
}

onMounted(()=>{
    logReview()
})

</script>

<style scoped>
.review-section {
    margin-top: 20px;
    padding: 15px;
    border-top: 1px solid #f0f0f0;
}

/* 评价标题和按钮容器 */
.review-title-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.review-title {
    font-size: 18px;
    margin: 0;
    color: #333;
}

.add-review-btn {
    margin-left: 10px;
    padding: 10px 20px;
    font-size: 14px;
}

/* 评价项样式 */
.review-item {
    padding: 12px 0;
    border-bottom: 1px dashed #eee;
}

.review-meta {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

.review-user {
    font-weight: bold;
    margin-right: 10px;
    color: #333;
}

.review-time {
    color: #999;
    font-size: 12px;
}

.review-content {
    margin-left: 5px;
    color: #333;
    line-height: 1.6;
}

.review-content p {
    margin: 0;
}
</style>